<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS三大特性</title>
    <style>
      /*a{color: red;}*/
      .t1{text-decoration: none}
      #t2{background-color: #12FA62}
      /*最终生效的样式,把之前声明的同名属性的值覆盖了*/
      #t2{background-color: pink}
      /*思考:后声明的同名属性的赋值,总会覆盖先前声明的属性的赋值吗?*/
      /*下发内容会生效吗? 为什么?  不会生效 因为权重*/
      /*权重 CSS权重的底层算法不是简单的加算*/
      /*内联style1000 id选择器100 类class选择器10 标签选择器1*/
      /* !important 理论上来说无穷大 权重最最最最最高*/
      .t1{background-color: #1898D5 !important;}
      /*继承性*/
      div{
          color: red;
          font-size: 40px;
          text-decoration: overline;
          /*div在不设置宽的时候 宽度父级的100%*/
          width: 300px;
          border: 1px solid red;
      }
    </style>
</head>
<body>
<!--
CSS三大特性 层叠性 继承性 优先级
层叠性
  如果是不相同的属性样式规则在同一个元素上时,则全部作用在元素上
  如果是相同属性样式规则作用在同一个元素上时,根据优先级来决定最终生效的样式
优先级 最好的体现在选择器权重上
继承性
  CSS元素的样式可以被子元素继承
-->
<a class="t1" id="t2" style="background-color: #B93DE9">百度</a>
<div><a>baidu</a></div>
</body>
</html>